<template>
      <!-- 最近一周接口报错前十分布 -->
      <div id="main" style="width: 600px;height:400px;"></div>

</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { GetInterfaceError } from '@/api/datalistQueue'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      interfaceError: [],
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // Mock: get all routes and roles list from server

    this.getInterfaceError()
  },
  methods: {
    async getInterfaceError() {
      const res = await GetInterfaceError({  })
      this.interfaceError = res.data.Table
      this.setOptions(this.interfaceError)
    },


    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },

    setOptions(interfaceError) {

      this.chart.setOption({
        title: {
                text: '2019年12月订单分析总表',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
				data: ['餐费','差旅费','车辆费','跨群借调','快递费','劳务费','内部推荐','体检费']
            },
            series: [
                {
                    name: '费用',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
						{value: 11398.5, name: '餐费'},
						{value: 19404.5, name: '差旅费'},
						{value: 209127, name: '车辆费'},
						{value: 291000, name: '跨群借调'},
						{value: 845, name: '快递费'},
						{value: 416446.9, name: '劳务费'},
						{value: 125800, name: '内部推荐'},
						{value: 25100, name: '体检费'}
					],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
      })
    }


    /* setOptions({ expectedData, actualData } = {}) {

      this.chart.setOption({
        xAxis: {
          data: ['一周', '二周', '三周', '四周', ],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
        },
        series: [{
          name: 'expected', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: 'actual',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    } */
  }
}
</script>






















<!-- <template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;" label="待办事项">
    <el-table-column label="单号" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="事项" width="195" align="center">
      <template slot-scope="scope">
        ¥{{ scope.row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { transactionList } from '@/api/remote-search'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      list: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      transactionList().then(response => {
        this.list = response.data.items.slice(0, 8)
      })
    }
  }
}
</script>
 -->
